<template>
	<div class="login">
		<div class="loginFrom">
			<el-input v-model="userName" type="text" placeholder="请输入用户名"></el-input>
			<el-input v-model="userPwd" type="password" placeholder="请输入密码"></el-input>
			<el-button type="primary" @click='login'>登录</el-button>
		</div>
	</div>
</template>
<script>
	// 默认导出
	export default{
		name:"",
		data(){
			return{
				userName:'',
				userPwd:''
			}
		},
		created(){
			
		},
		mounted() {
			
		},
		methods:{
			login(){
				const _this = this;
				if(_this.userName===''){
					_this.$message({
						message:'请输入用户名',
						type:'error',
						duration:1000
					})
				}else if(_this.userPwd===""){
					_this.$message({
						 message:'请输入密码',
						 type:'error',
						 duration:1000
					})
				}
			}
		}
	}
	
</script>
<style scoped="scoped">
	.login {
		width: 100%;
		height: 100vh;
		/* background-size:cover */
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	
	.loginFrom {
		width: 380px;
		/* background-color:rgba(255,255,255,0.2); */
	}
	
	.el-input {
		margin-bottom: 20px;
	}
	
	.el-button {
		width: 100%;
	}
</style>